import { useRef } from 'react'
import { WebView } from 'react-native-webview'
import { StyleSheet, View, TouchableHighlight, ActivityIndicator, Platform } from 'react-native'
import { useRouter } from 'expo-router'
import Constants from 'expo-constants'
import { useLocalSearchParams } from 'expo-router'
import { AntDesign, Feather, MaterialCommunityIcons } from '@expo/vector-icons';
import { Loading } from '@/components/Loading'

export default function WebViewer() {
  const { uri, canNavigateExternal= false } = useLocalSearchParams<{uri: string, canNavigateExternal: boolean}>()
  const router = useRouter()
  const webViewRef = useRef()

  const handleNavigate = (newNavState) => {
    console.log(newNavState)
  }
  const handleRefresh = () => {
    if (!webViewRef.current) return
    console.log(webViewRef.current)
    webViewRef.current.reload()
  }
  const handleBack = () => {
    if (!webViewRef.current) return
    webViewRef.current.goBack()
  }
  const handleForward = () => {
    if (!webViewRef.current) return
    webViewRef.current.goForward()
  }
  const handleOpenWindow = (syntheticEvent) => {
    const { nativeEvent } = syntheticEvent
    const { targetUrl } = nativeEvent
    alert('Intercepted OpenWindow for: ' + targetUrl)
  }
  return (
    <View style={styles.container}>
      <WebView
        originWhitelist={['*']}
        style={styles.webview}
        source={{ uri }}
        onNavigationStateChange={handleNavigate}
        onOpenWindow={handleOpenWindow}
        startInLoadingState={true}
        renderLoading={() => <Loading />}
        allowsFullscreenVideo={true}
        allowsInlineMediaPlayback={true}
        scalesPageToFit={Platform.OS === 'android'}
        ref={webViewRef}
      />
      <View style={styles.controlBar}>
        <TouchableHighlight style={[styles.controlItem, styles.refresh]} onPress={handleRefresh}>
          <Feather size={30} name="refresh-cw" color="#fff" />
        </TouchableHighlight>
        <TouchableHighlight style={styles.controlItem} onPress={handleBack}>
          <AntDesign size={30} name="left" color="#fff" />
        </TouchableHighlight>
        <TouchableHighlight style={[styles.controlItem, styles.forward]} onPress={handleForward}>
          <AntDesign size={30} name="right" color="#fff" />
        </TouchableHighlight>
        <TouchableHighlight style={[styles.controlItem, styles.exit]} onPress={() => router.back()}>
          <MaterialCommunityIcons size={30} name="exit-run" color="#fff" />
        </TouchableHighlight>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight
  },
  webview: {
    flex: 1,
    width: '100%',
    height: '100%'
  },
  controlBar: {
    position: 'absolute',
    paddingHorizontal: 10,
    right: 0,
    bottom: '20%',
  },
  controlItem: {
    marginTop: 15,
    width: 40,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(50, 255, 50, 0.7)',
  },
  refresh: {
    backgroundColor: 'rgba(115,129,255,0.7)',
  },
  backBox: {
    position: 'absolute',
    right: 10,
    bottom: '20%',
    width: 40,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(50, 255, 50, 0.7)',
  },
  exit: {
    backgroundColor: 'rgba(246,77,81,0.7)',
  },
  forward: {
    backgroundColor: 'rgba(32,178,170,0.7)',
  }
})